<!--这个是第一个版本的重置密码的页面，先留着，时间久了可以删掉 2019.8.6-->
<template>
    <div class="reset-password">
        <div class="reset-title">忘记密码
            <span class="iconfont icon-close close-forget-password" @click="$emit('closeReset')"></span>
        </div>
        <ul class="reset-list">
            <li class="reset-item">
                <div class="check-phone-warp displayFlex flexCenter">
                    <phone-check-bottom-line @changeCheck="phoneCheckFn" :porpsContent="{'isShowRedWarn':false,'isShowToastWarn':false}"></phone-check-bottom-line>
                    <span v-if="!passwordLogin" class="get-code" :class="{disabled:!isCanGetCode}" @click="getCode">{{getCodeText}}</span>
                </div>
            </li>
            <li class="reset-item">
                <four-code v-if="!passwordLogin" @checkCode="checkCodeFn"></four-code>
            </li>
            <li class="reset-item">
                <div class="check-phone-warp displayFlex">
                    <check-password class="reset-password-winput" @checkPassword="checkPasswordFn"  :propsContent="checkPassword"></check-password>
                </div>
            </li>
        </ul>
        <div class="width-full displayFlex flexCenter">
            <button class="button" :class="{'disabled':!isCanSubmit}" @click="submitEditPsw">提交</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ResetPw",
        data(){
            return{
                code1:'',
                code2:'',
                code3:'',
                code4:'',
                phoneObj:{},
                codeObj:{},
                passwordObj:{},
                checkPassword:{},
                isCanGetCode:false,
                isCanSubmit:false,
                passwordLogin:false,
                getCodeText:'获取验证码',
            }
        },
        methods:{
            phoneCheckFn(obj){
                if(obj.phoneTrue && this.getCodeText == '获取验证码'){
                    this.isCanGetCode = true;
                }
                this.phoneObj = Object.assign({},this.phoneObj,obj);
                this.checkIsCanSubmit();
            },
            checkIsCanSubmit(){
                if( this.phoneObj.phoneTrue && this.codeObj.codeTrue && this.passwordObj.passwordTrue ){
                    this.isCanSubmit = true;
                }else{
                    this.isCanSubmit = false;
                }
            },
            checkPasswordFn(obj){
                this.passwordObj = Object.assign({},this.passwordObj,obj);
                this.checkIsCanSubmit();
            },
            checkCodeFn(obj){
                this.codeObj = Object.assign({},this.codeObj,obj);
                this.checkIsCanSubmit();
            },
            /*获取验证码*/
            getCode(){
                let that = this;
                this.isCanGetCode = false;
                this.getCodeTime = 60;
                let url = `${this.NW_API}/api/send/code/phone/${this.phoneObj.phoneNum}`;
                this.xurl.post(url).then((result)=>{
                    this.$root.$emit('toast',{msg:'发送验证码成功'});
                    this.getCodeTimer = setInterval(()=>{
                        that.getCodeTime --;
                        that.getCodeText = `${that.getCodeTime}s`;
                        if(this.getCodeTime < 0){
                            that.isCanGetCode = true;
                            that.getCodeText = `获取验证码`;
                            clearInterval(that.getCodeTimer);
                        }
                    },1000);
                }).catch(()=>{
                    that.isCanGetCode = true;
                    that.getCodeText = `获取验证码`;
                })
            },
            /*提交修改密码*/
            submitEditPsw(){
                let url = `${this.NW_API_API_LOCALE_VERSION}/user/account/forget/pwd/login`;
                let that = this;
                let deviceId = Math.random().toString(36).substr(2).slice(1, 1 + 5) + Date.parse(new Date()) + Math.random().toString(36).substr(2).slice(1, 1 + 5);
                let paramas = {
                    "phone": that.phoneObj.phoneNum,         //----手机号码    必传
                    "authCode": that.codeObj.code,           //----验证码
                    "newPwd": that.passwordObj.password,              //----新密码，明文
                    "deviceType": "H5",            //----设备类型
                    "terminalType": "CustomerH5",
                    "deviceId": window.localStorage.getItem('deviceId') ? JSON.parse(window.localStorage.getItem('deviceId')) : deviceId,             //----设备ID
                };
                this.xurl.postDataJsonLoading(url,paramas,false).then((data)=>{
                    let nextPage = window.localStorage.getItem(this.NEXTPAGE);
                    this.$store.dispatch('updateCurrentUser',data.result);
                    if(nextPage){
                        window.location.href = nextPage;
                    }else{
                        this.$router.push({path:'/home'})
                    }
                })
            }
        },
        components:{
            'phone-check-bottom-line':()=>import("../../components/commonComponents/phone/PhoneCheckBottomLine"),
            'check-password':()=>import("../../components/commonComponents/password/CheckPassword"),
            'four-code':()=>import("../../components/commonComponents/codeCheck/FourCodeOneInput")
        }
    }
</script>

<style scoped lang="scss">
    .reset-password{
        width: 100%;
        background-color: #fff;
        height: 100vh;
    }
    .reset-title{
        text-align: center;
        position: relative;
        font-size: .16rem;
        color: #333333;
        height: .5rem;
        line-height: .5rem;
        border-bottom: 1px solid #E0E0E0;
    }
    .close-forget-password{
        color: #333;
        font-size: .16rem;
        position: absolute;
        right: .15rem;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .four-code{
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding-top: .36rem;
    }
    .placeholder-text{
        position: absolute;
        color: #CCCCCC;
        font-size: .15rem;
        bottom: .15rem;
    }
    .code-item-wrap{
        border-bottom: 1px solid #E0E0E0;
        display: inline-block;
        width: .5rem;
        height: .3rem;
    }
    .reset-list{
        padding-top: .4rem;
    }
    .reset-item{
        padding: 0 .3rem;
    }
    .check-phone-warp{
        border-bottom: 1px solid #E0E0E0;
        padding-top: .36rem;
    }
    .reset-password-winput{
        flex: 1;
        height: .3rem;
    }
    .forget-password{
        color: #3E69A5;
        font-size: .12rem;
    }
    .get-code{
        background-color: #D4E0FA;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        color: #3E69A5;
        font-size: .12rem;
        width: .8rem;
        padding: 0 .05rem;
        white-space: nowrap;
        height: .24rem;
        line-height: .24rem;
    }
    .get-code.disabled {
        opacity: .6;
    }
    .button{
        position: relative;
        z-index: 110;
        background-color: #8BA9E8;
        font-size: .15rem;
        display: inline-block;
        border-radius: .25rem;
        width: 3.15rem;
        height: .44rem;
        color: #FFF;
        letter-spacing: 1px;
        margin-top: .5rem;
        -webkit-box-shadow: 0 0.02rem 0.1rem #8BA9E8;
        -moz-box-shadow: 0 .02rem .1rem #8BA9E8;
        box-shadow: 0 0.02rem 0.1rem #8BA9E8;
        text-align: center;
        line-height: .44rem;
    }
    .button.disabled{
        opacity: .4;
    }
</style>
<!-- <span class="placeholder-text" v-if="!(codelist[0].content || codelist[1].content || codelist[2].content || codelist[3].content)">请输入手机短信验证码</span>
                            <span class="code-item-wrap" v-for="(value,key) in codelist" :class="{'active':code1 }" :key="key">
                                <input @keydown="changeInput($event,key)" :class="{'disabled':codelist[key].content }" class="code-input-item" type="number" v-model="codelist[key].value" maxlength="1" />
                            </span>-->
<!--changeInput(e,key){
                let that = this;
                let thisDom = e.currentTarget;
                for(let item of that.codelist){
                    if(item.content && thisDom == item.content){
                        item.content
                    }
                }
            },-->